<template>
	<view>
		<!-- 成为vip -->
		<!-- <view class="vip">
			<text>成为vip解锁全部功能</text>
			<view class="btn">
				解锁
			</view>
		</view> -->

		<!-- 价格 -->
		<view class="lists">
			<scroll-view class="" scroll-x>
				<view class="list" @click="xxs=item.id;ti(item.price)" :class="xxs== item.id?'show':''" v-for="item in viplist"
					:key='item.id'>
					<view class="tit">
						{{item.name}}
					</view>
					<view class="iocn">
						<image class="img" src="../../static/pay-czicon.png" mode=""></image>
					</view>
					<view class="money">
						￥{{item.price}}
					</view>
				</view>
				<view class="listo" @click="xxs=6;ti(zdy)" :class="xxs== 6 ?'show':''">
					<view class="listoo">
						<text>{{zdy == '自定义金额' ? '' : zdy*10+"个钻石"}}</text>
						<text>￥</text>
						<text @click="lik()" v-if="likk">{{zdy}}</text>
						<input type="number"
						value=""
						v-model="zdy"
						placeholder="请输入金额"
						@blur="lik()"
						v-on:input="shur()"
						v-show="likk == false"
						@focus="lik1()"
						ref="inputVal"
						/>
					</view>
				</view>
			</scroll-view>
			<!-- 支付方式 -->

		</view>
		<view class="type">
			<!-- 支付宝 -->
			<view class="zfb" :class="type==1?'show':''" @click="type=1,submit(0)">
				支付宝支付
			</view>
			<!-- 微信 -->
			<view class="wx" :class="type==2?'show':''" @click="type=2,submit(1)">
				微信支付
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/api.js'
	export default {
		data() {
			return {
				type: 1,
				id: '',
				viplist: '',
				zdy: "自定义金额",
				likk: true,
				xxs:"",
				qian:null,
			};
		},
		mounted() {
			this.getlsit()
		},
		methods: {
			ti(con=0){
				this.qian = con
			},
			shur(){
				this.qian = this.zdy
			},
			lik(){
				if(this.likk == true){
					if(this.zdy == '自定义金额') this.zdy = ''
					this.likk = false
				}else{
					if(this.zdy == '') this.zdy = '自定义金额'
					this.likk = true
				}
				console.log(this.likk)
			},
			getlsit() {
				api.request({
					url: '/p/recharge',
					method: 'GET',
				}).then(res => {
					this.viplist = res.data
					console.log(res);
				})
			},
			submit(ser) {
				console.log(ser)
				if (this.xxs == '') {
					uni.showToast({
						title: '套餐没有选择',
						icon: 'none'
					})
					return
				}
				if (this.qian == '自定义金额') {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
					return
				}
				if(this.xxs == 6){
					this.xxs = ''
					console.log(this.qian,this.xxs)
				}
				if(this.qian < 1 && this.xxs == "1"){
					uni.showToast({
						title: '充值数不能小于1元',
						icon: 'none'
					})
					return
				}
				if(ser == 1){
					uni.getProvider({
					    service: 'payment', //service	String	服务类型  oauth授权登录 share分享 payment支付 push推送
					    success: function (res) {  //成功的回调
					        console.log(res.provider)
					    }
					});
					console.log("微信支付开始")
					console.log(this.qian,this.xxs)
					api.request({
						url: '/p/order',
						method: 'POST',
						data: {
							"actualTotal": this.qian,
							"diamondNum": this.qian*10,
							"orderType": 1,
							// "packageId": 0,
							"payType": 1,
							"prodName": this.qian*10+"个钻石",
							"total": this.qian
						}
					}).then(res => {
						console.log(res)
						api.request({
							url: '/p/pay',
							method: 'POST',
							data: {
								"orderNumber": res.data.orderNumber,
								"payType": 1
							}
						}).then(dat => {
							console.log(dat)
							console.log(JSON.stringify(dat.data))
							uni.requestPayment({
							    "provider": "wxpay",
							    "orderInfo": {
									"appid": dat.data.appId,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
									"noncestr": dat.data.nonceStr, // 随机字符串
									"package": dat.data.packageValue,        // 固定值
									"partnerid": dat.data.partnerId,      // 微信支付商户号
									"prepayid": dat.data.prepayId, // 统一下单订单号 
									"timestamp": dat.data.timeStamp,        // 时间戳（单位：秒）
									"sign": dat.data.sign // 签名，这里用的 MD5 签名
								}, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							    success: function (res) {
									uni.showToast({
										title: '支付成功',
										icon: 'none'
									})
							        console.log('success:' + JSON.stringify(res));
							    },
							    fail: function (err) {
									uni.showToast({
										title: '支付失败，请重试',
										icon: 'none'
									})
									console.log(err)
							        console.log('fail:' + JSON.stringify(err));
							    }
							});
						})
						
					})
				}
				// api.request({
				// 	url: '/p/recharge',
				// 	method: 'POST',
				// 	data: {
				// 		"diamondCount": this.qian,
				// 		"id": this.xxs
				// 	}
				// }).then(res => {
				// 	console.log(res);
				// 	if (res.statusCode == 200) {
				// 		uni.showToast({
				// 			title: '支付成功',
				// 			icon: 'success'
				// 		})
				// 		setTimeout(() => {
				// 			uni.switchTab({
				// 				url: '../index/index'
				// 			})
				// 		}, 1000)
				// 	}
				// })
				console.log(this.qian,this.xxs)
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #242329;
	}

	.vip {
		width: 90%;
		height: 120rpx;
		line-height: 120rpx;
		border-radius: 18rpx;
		background-color: #f3a669;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		display: flex;
		justify-content: space-between;
		margin: auto;
		padding: 0 30rpx;
		margin-top: 40rpx;

		.btn {
			width: 120rpx;
			height: 60rpx;
			margin: auto 0;
			line-height: 60rpx;
			border-radius: 20rpx;
			background-color: rgba(0, 0, 0, 0.68);
			color: rgba(255, 255, 255, 100);
			font-size: 28rpx;
		}
	}

	.lists {
		margin-top: 100rpx;
		border-radius: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding-top: 30rpx;
		position: relative;

		scroll-view {
			width: 100%;
			margin-top: 100rpx;
		}

		padding-left: 30rpx;
		margin-top: 30rpx;

		.listo{
			width: 210rpx;
			height: 260rpx;
			border-radius: 10rpx;
			text-align: center;
			margin-bottom: 30rpx;
			display: inline-block;
			margin-right: 30rpx;
			color: #fff;
			background-color: #3b3b43;
			margin-bottom: 30rpx;
			position: absolute;
		}

		.listoo{
			margin-top: 80rpx;

			text {
				font-size: 34rpx;
			}
		}

		.list {
			width: 210rpx;
			height: 260rpx;
			border-radius: 10rpx;
			text-align: center;
			margin-bottom: 30rpx;
			display: inline-block;
			margin-right: 30rpx;
			color: #fff;
			background-color: #3b3b43;



			.tit {
				font-size: 28rpx;
				height: 60rpx;
				margin-top: 30rpx;
			}

			.money {
				margin-top: 20rpx;
				font-size: 42rpx;
			}

			.iocn {
				width: 50rpx;
				height: 50rpx;
				margin: auto;
				margin-top: 20rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

		}

		.show {
			border: 2px solid #feb242;
		}
	}

	.type {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 100rpx;

		.zfb {
			width: 300rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			background-color: rgba(7, 189, 238, 100);
		}

		.wx {
			width: 300rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			text-align: center;
			background-color: #82b927;
		}

	}
</style>
